<template>
	<div>
		<ContentWrap>
			<!-- 搜索工作栏 -->
			<el-form
					ref="queryFormRef"
					:inline="true"
					:model="queryParams"
					class="-mb-15px"
					label-width="90px"
			>
				<el-form-item label="文档ID" prop="id">
					<el-input
							v-model="queryParams.id"
							class="!w-240px"
							clearable
							placeholder="请输入文档ID"
							@keyup.enter="handleQuery"
					/>
				</el-form-item>
				<el-form-item label="文档名称" prop="fileName">
					<el-input
							v-model="queryParams.fileName"
							class="!w-240px"
							clearable
							placeholder="请输入文档名称"
							@keyup.enter="handleQuery"
					/>
				</el-form-item>
				<el-form-item label="发布人名称" prop="userName">
					<el-input
							v-model="queryParams.userName"
							class="!w-240px"
							clearable
							placeholder="请输入发布人名称"
							@keyup.enter="handleQuery"
					/>
				</el-form-item>
				<el-form-item label="创建时间" prop="createTime">
					<el-date-picker
							v-model="queryParams.createTime"
							:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
							class="!w-240px"
							end-placeholder="结束日期"
							start-placeholder="开始日期"
							type="daterange"
							value-format="YYYY-MM-DD HH:mm:ss"
					/>
				</el-form-item>
				<el-form-item v-hasPermi="['system-doc-index-query']">
					<div class="model-button">
						<el-button @click="handleQuery">
							<Icon class="mr-5px" icon="ep:search"/>
							搜索
						</el-button>
						<el-button @click="resetQuery"> 重置</el-button>
					</div>
				</el-form-item>
			</el-form>
			<div class="model-button" style="margin-top: 40px">
				<el-button
						color="#0D0D0D"
						v-hasPermi="['system-doc-index-create']"
						@click="openForm('create')"
				>
					<Icon class="mr-5px" icon="ep:plus"/>
					新增
				</el-button>
			</div>
			
			<!-- 列表 -->
			<el-table v-loading="loading" :data="list" style="margin-top: 20px" stripe>
				<el-table-column align="center" label="文档ID" prop="id" sortable/>
				<el-table-column align="center" label="文档名称" prop="fileName">
					<template #header>
						<div class="postedByNameBox">
							<div class="names">文档名称</div>
							<div class="postedByNameStyle">
								<el-input
										clearable
										v-model="queryParams.fileNameFirst"
										:prefix-icon="Search"
										@change="getList"
										placeholder="按首字母筛选"/>
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column align="center" label="查看权限" prop="org">
					<template #header>
						<div class="postedByNameBox">
							<div class="names">查看权限</div>
							<div class="postedByNameStyle">
								<el-input
										clearable
										v-model="queryParams.org"
										:prefix-icon="Search"
										@change="getList"
										placeholder="搜索"/>
							</div>
						</div>
					</template>
					<template #default="scope">
						<div>{{ scope.row.org }} | {{ scope.row.level }}</div>
					</template>
				</el-table-column>
				<el-table-column align="center" label="发布人" prop="userName">
					<template #header>
						<div class="postedByNameBox">
							<div class="names">发布人</div>
							<div class="postedByNameStyle">
								<el-input
										clearable
										v-model="queryParams.nicknameFirst"
										:prefix-icon="Search"
										@change="getList"
										placeholder="按首字母筛选"/>
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column
						sortable
						align="center"
						label="创建时间"
						prop="createTime"
						:formatter="dateFormatter"
				/>
				<el-table-column :width="300" align="center" label="操作">
					<template #default="scope">
						<el-button
								v-hasPermi="['system-doc-index-update']"
								link
								type="primary"
								@click="openForm('update', scope.row.id)"
						>
							编辑
						</el-button>
						<el-button
								v-hasPermi="['system-doc-index-delete']"
								link
								type="danger"
								@click="handleDelete(scope.row)"
						>
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<div class="flex align-items" style="justify-content: center">
				<Pagination
						v-model:limit="queryParams.pageSize"
						v-model:page="queryParams.pageNo"
						:total="total"
						@pagination="getList"
				/>
			</div>
		</ContentWrap>
		
		<DocFrom ref="formRef" @success="getList"/>
	</div>
</template>

<script setup lang="ts">
import {DICT_TYPE, getIntDictOptions} from '@/utils/dict'
import {dateFormatter} from '@/utils/formatTime'
import * as RoleApi from '@/api/system/role'
import {GetOrgList} from '@/api/system/org'
import {systemDocPage, systemDocDelete} from '@/api/system/doc'
import DocFrom from './DocFrom.vue'
import {Search} from "@element-plus/icons-vue";

const message = useMessage() // 消息弹窗

/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id)
}

const queryFormRef = ref(null)
const loading = ref(false) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  id: '',
  org: '',
  fileNameFirst: '',
  orgFirst: '',
  nicknameFirst: '',
  fileName: '',
  userName: '',
  userId: '',
  createTime: ''
})

const orgList = ref([])
const apiGetOrgList = async () => {
  orgList.value = await GetOrgList()
}

/** 删除按钮操作 */
const handleDelete = async (row: object) => {
  try {
    // 删除的二次确认
    await message.delConfirm(`${row.fileName}确定删除此文档？`)
    // 发起删除
    await systemDocDelete(row.id)
    message.success('删除成功')
    // 刷新列表
    await getList()
  } catch {
  }
}

/** 查询角色列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await systemDocPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

onMounted(() => {
  apiGetOrgList()
  getList()
})
onUpdated(() => {
})
onUnmounted(() => {
})
</script>

<style scoped lang="scss"></style>
